<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div id="appCmsContent">
<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item>首页</el-breadcrumb-item>
	<el-breadcrumb-item>内容管理</el-breadcrumb-item>
	<el-breadcrumb-item>文章管理</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<el-row>
<el-col :span="24" align="right">
	<el-select v-model="selectedSite" placeholder="请选择站点" @change="onCmsSiteChange" size="small">
		<el-option v-for="item in optionsCmsSite" :key="item.id" :label="item.domain" :value="item.id">
		</el-option>
	</el-select>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="24">
	<el-table ref="tableCmsCate" :data="tableCmsCateData" border stripe fit highlight-current-row
		v-loading="tableCmsCateLoading" max-height="1200">
		<el-table-column prop="name" label="栏目名称" width="320">
	      <template slot-scope="scope">
	      	<span v-for="item in new Array(scope.row.level - 1)" style="padding-left: 18px;"></span>
	      	<i v-if="scope.row.isParent == true" class="el-icon-caret-bottom"></i>
	        {{ scope.row.name }}
	      </template>	
		</el-table-column>
		<el-table-column prop="cateKind" label="类型" width="180">
	      <template slot-scope="scope">
	        {{ getCateKindLabel(scope.row.cateKind) }}
	      </template>		
		</el-table-column>
		<el-table-column prop="display" label="显示" width="180">
	      <template slot-scope="scope">
	        {{ getDisplayLabel(scope.row.display) }}
	      </template>		
		</el-table-column>
		<el-table-column prop="status" label="状态" width="80">
	      <template slot-scope="scope">
			<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small"
          		disable-transitions>{{ scope.row.status === 1 ? '正常' : '禁用' }}</el-tag>
	      </template>		
		</el-table-column>
		<el-table-column prop="sort" label="排序" width="80">
		</el-table-column>
	    <el-table-column label="操作" width="180">
			<template slot-scope="scope">
				<el-button @click="handleManageCmsContent(scope.$index, scope.row)" type="text" size="small">管理内容</el-button>
			</template>
	    </el-table-column>
	</el-table>
</el-col>
</el-row>

<el-dialog :title="dialogTableCmsContentTitle" :visible.sync="dialogTableCmsContentVisible" width="80%" top="3vh" @closed="dialogTableCmsContentClosed">
<el-row>
<el-col :span="24" align="right">
	<el-button @click="handleAddCmsContent" size="small" type="success" icon="el-icon-circle-plus-outline">添加内容</el-button>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="24">
	<el-table ref="tableCmsContent" :data="tableCmsContentData" border stripe fit highlight-current-row
		v-loading="tableCmsContentLoading" max-height="1200">
		<el-table-column prop="title" label="标题" width="320" :show-overflow-tooltip="true">
		</el-table-column>
		<el-table-column prop="url" label="URL" width="120" :show-overflow-tooltip="true">
		</el-table-column>
		<el-table-column prop="clicks" label="点击量" width="80">
		</el-table-column>
		<el-table-column prop="isTop" label="置顶" width="80">
	      <template slot-scope="scope">
			<el-tag :type="scope.row.isTop == true ? 'primary' : 'info'" size="small"
          		disable-transitions>{{ scope.row.isTop == true ? '是' : '否' }}</el-tag>
	      </template>		
		</el-table-column>
		<el-table-column prop="isRcmd" label="推荐" width="80">
	      <template slot-scope="scope">
			<el-tag :type="scope.row.isRcmd == true ? 'primary' : 'info'" size="small"
          		disable-transitions>{{ scope.row.isRcmd == true ? '是' : '否' }}</el-tag>
	      </template>		
		</el-table-column>
		<el-table-column prop="status" label="状态" width="80">
	      <template slot-scope="scope">
			<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small"
          		disable-transitions>{{ scope.row.status === 1 ? '可见' : '不可见' }}</el-tag>
	      </template>		
		</el-table-column>
		<el-table-column prop="sort" label="排序" width="80">
		</el-table-column>
		<el-table-column prop="updated" label="修改日期" :formatter="dateFormat" width="180" sortable>
		</el-table-column>
	    <el-table-column label="操作" width="180">
			<template slot-scope="scope">
				<el-button @click="handleEditCmsContent(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
			</template>
	    </el-table-column>
	</el-table>
</el-col>
</el-row>
</el-dialog>

<el-dialog :title="dialogCmsContentTitle" :visible.sync="dialogCmsContentVisible" width="75%" top="3vh" @closed="dialogCmsContentClosed">
	<el-form ref="formCmsContent" :model="modelCmsContent" status-icon :rules="rulesCmsContent">
		<el-form-item label="标题" :label-width="formCmsContentLabelWidth" prop="title" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.title" autocomplete="off" maxlength="50"></el-input>
		</el-form-item>
		<el-form-item label="标签" :label-width="formCmsContentLabelWidth" prop="tags">
			<el-input v-model="modelCmsContent.tags" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="描述" :label-width="formCmsContentLabelWidth" prop="contentDesc">
			<el-input v-model="modelCmsContent.contentDesc" autocomplete="off" maxlength="300" type="textarea" :rows="4"></el-input>
		</el-form-item>
		<el-form-item label="URL" :label-width="formCmsContentLabelWidth" prop="url" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.url" autocomplete="off" maxlength="300"></el-input>
		</el-form-item>
		<el-form-item label="图片" :label-width="formCmsContentLabelWidth" prop="pic" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.pic" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="图片2" :label-width="formCmsContentLabelWidth" prop="pic2" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.pic2" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="点击量" :label-width="formCmsContentLabelWidth" prop="clicks" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.clicks" autocomplete="off" maxlength="20"></el-input>
		</el-form-item>
		<el-form-item label="置顶推荐" :label-width="formCmsContentLabelWidth" v-if="cateKind != 1">
			<el-checkbox v-model="modelCmsContent.isTop">置顶</el-checkbox>
  			<el-checkbox v-model="modelCmsContent.isRcmd">推荐</el-checkbox>
		</el-form-item>
		<el-form-item label="状态" :label-width="formCmsContentLabelWidth" v-if="cateKind != 1">
			<el-select v-model="modelCmsContent.status" placeholder="请选择状态">
				<el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="排序" :label-width="formCmsContentLabelWidth" prop="sort" placeholder="排序编号越小越靠前" v-if="cateKind != 1">
			<el-input v-model="modelCmsContent.sort" autocomplete="off" maxlength="11"></el-input>
		</el-form-item>
		<el-form-item label="正文" :label-width="formCmsContentLabelWidth" prop="content">
			<el-input v-model="modelCmsContent.content" autocomplete="off" maxlength="500" type="textarea" :rows="8"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogCmsContentVisible = false">取 消</el-button>
		<el-button type="primary" :loading="isButtonLoadingCmsContent" @click="onSubmitCmsContent">确 定</el-button>
	</div>
</el-dialog>
</div>

<script>
	var appCmsContent = new Vue({
		el: '#appCmsContent',
		data() {
			var checkTitle = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('标题不能为空'));
		        } else {
		        	callback();
		        }
			};
			var checkSort = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('排序不能为空'));
		        } else {
					callback();
		        }				
			};
			return {
				urlPostCmsSiteList: '/api/cms/site/list',
				urlPostCmsCateList: '/api/cms/cate/list',
				urlPostCmsContentList: '/api/cms/content/list',
				urlPostCmsContentSave: '/api/cms/content/save',
				urlPostCmsContentTextGet: '/api/cms/content/text/get',
				optionsCmsSite: [],
				selectedSite: null,
				siteId: null,
				tableCmsCateData: [],
				tableCmsCateLoading: false,
				dialogTableCmsContentTitle: '管理内容',
				dialogTableCmsContentVisible: false,
				cateId: null,
				cateKind: null,
				page: 1,
				rows: 20,
				total: 100,
				tableCmsContentData: [],
				tableCmsContentLoading: false,
				dialogCmsContentVisible: false,
				dialogCmsContentTitle: '添加文章',
				cateKindOptions: [{
					label: '简介模块', value: 1
				},{
					label: '文章模块', value: 2
				},{
					label: '图片模块', value: 3
				},{
					label: '下载模块', value: 4
				},{
					label: '招聘模块', value: 5
				},{
					label: '友链模块', value: 6
				}],
				displayOptions: [{
					label: '不显示', value: 1
				},{
					label: '都显示', value: 2
				},{
					label: '头部导航显示', value: 3
				},{
					label: '底部导航显示', value: 4
				}],
				statusOptions: [{
					label: '显示', value: 1
				},{
					label: '不显示', value: 2
				}],
				modelCmsContent: {
					id: null,
					cateId: null,
					tags: '',
					contentDesc: '',
		            url: '',
		            pic: '',
		            pic2: '',
		            clicks: 0,
		            isTop: false,
		            isRcmd: false,
		            sort: 666,
		            status: 1,
		            siteId: null,
		            content: ''
				},
				rulesCmsContent: {
					title: [{validator: checkTitle, trigger: 'blur'}],
					sort: [{validator: checkSort, trigger: 'blur'}]
				},
				formCmsContentLabelWidth: '80px',
				isButtonLoadingCmsContent: false,
			}
		},
		methods: {
			/* Table */
			loadCmsSite() {
				this.$http.post(this.urlPostCmsSiteList, null, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.optionsCmsSite = response.body.data.list;
						if (this.optionsCmsSite && this.optionsCmsSite.length > 0) {
							this.selectedSite = this.optionsCmsSite[0];
							this.siteId = this.optionsCmsSite[0].id;
							this.onCmsSiteChange();
						}
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			onCmsSiteChange() {
				if (this.selectedSite) {
					this.loadtableCmsCateData();
					this.modelCmsContent.siteId = this.siteId;
					this.AddCmsCateButtonDisabled = false;
				}
			},
			loadtableCmsCateData() {
				this.tableCmsSiteLoading = true;
				this.$http.post(this.urlPostCmsCateList, {siteId: this.siteId}, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.tableCmsCateData = response.body.data;
						this.tableCmsSiteLoading = false;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			},
			loadtableCmsContentData() {
				this.tableCmsContentLoading = true;
				this.$http.post(this.urlPostCmsContentList, {page: this.page, rows: this.rows, cateId: this.cateId}, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.tableCmsContentData = response.body.data.list;
						this.tableCmsContentLoading = false;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			},
			handleManageCmsContent(index, row) {
				this.cateId = row.id;
				this.cateKind = row.cateKind;
				if (row.cateKind == 1) {//简介模块
					this.dialogCmsContentTitle = '编辑内容【' + row.name + '】';
					this.dialogCmsContentVisible = true;
					this.modelCmsContent.cateId = this.cateId;
					this.modelCmsContent.title = row.name;
					// 获取第一条
					this.$http.post(this.urlPostCmsContentList, {cateId: this.cateId}, {emulateJSON: true}).
					then(function(response) {
						if (response.body.status == 200) {
							var tmp = response.body.data.list;
							if (tmp && tmp.length > 0) {
								this.modelCmsContent.id = tmp[0].id;
								this.modelCmsContent.cateId = tmp[0].cateId;
								this.modelCmsContent.title = tmp[0].title;
								this.modelCmsContent.tags = tmp[0].tags;
								this.modelCmsContent.contentDesc = tmp[0].contentDesc;
								this.modelCmsContent.url = tmp[0].url;
								this.modelCmsContent.pic = tmp[0].pic;
								this.modelCmsContent.pic2 = tmp[0].pic2;
								this.modelCmsContent.clicks = tmp[0].clicks;
								this.modelCmsContent.isTop = tmp[0].isTop;
								this.modelCmsContent.isRcmd = tmp[0].isRcmd;
								this.modelCmsContent.sort = tmp[0].sort;
								this.modelCmsContent.status = tmp[0].status;
								this.modelCmsContent.siteId = tmp[0].siteId;
								// 获取正文
								this.getContentTextById(tmp[0].id);
							}
						}
					}).catch(function (error) {
						console.log(error);
					});	
				} else {
					this.dialogTableCmsContentTitle = '管理内容【' + row.name + '】';
					this.dialogTableCmsContentVisible = true;
					this.loadtableCmsContentData();
				}
			},
			handleAddCmsContent() {
				this.dialogCmsContentTitle = '添加内容';
				this.modelCmsContent.cateId = this.cateId;
				this.dialogCmsContentVisible = true;
			},
			handleEditCmsContent(index, row) {
				//console.log(index, row);
				this.dialogCmsContentTitle = '修改内容';
				this.dialogCmsContentVisible = true;
				this.modelCmsContent.id = row.id;
				this.modelCmsContent.cateId = row.cateId;
				this.modelCmsContent.title = row.title;
				this.modelCmsContent.tags = row.tags;
				this.modelCmsContent.contentDesc = row.contentDesc;
				this.modelCmsContent.url = row.url;
				this.modelCmsContent.pic = row.pic;
				this.modelCmsContent.pic2 = row.pic2;
				this.modelCmsContent.clicks = row.clicks;
				this.modelCmsContent.isTop = row.isTop;
				this.modelCmsContent.isRcmd = row.isRcmd;
				this.modelCmsContent.sort = row.sort;
				this.modelCmsContent.status = row.status;
				this.modelCmsContent.siteId = row.siteId;
				// 获取正文
				this.getContentTextById(row.id);
			},
			getContentTextById(id) {
				this.$http.post(this.urlPostCmsContentTextGet, {id: id}, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.modelCmsContent.content = response.body.data.content;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			},
			indexMethod(index) {
				return index + 1;
			},
			dateFormat(row, column, cellValue, index) {
				var date = new Date(cellValue);
				return formatDate(date, "yyyy-MM-dd hh:mm:ss");
			},
			getCateKindLabel(cateKind) {
				var label;
				this.cateKindOptions.forEach(function(item, index) {
					if (item.value == cateKind) {
						label = item.label;
					}
				});
				return label;
			},
			getDisplayLabel(display) {
				var label;
				this.displayOptions.forEach(function(item, index) {
					if (item.value == display) {
						label = item.label;
					}
				});
				return label;
			},
			/* Edit */
			onSubmitCmsContent() {
				this.isButtonLoadingCmsContent = true;
				this.$refs.formCmsContent.validate((valid) => {
					if (valid) {
						this.$refs.formCmsContent.$http.post(this.urlPostCmsContentSave, this.modelCmsContent, {emulateJSON: true})
						.then(function (response) {
							if (response.body.status == 200) {
								this.$message({
									message: "保存成功",
									type: "success"
								});
								appCmsContent.isButtonLoadingCmsContent = false;
								appCmsContent.dialogCmsContentVisible = false;
								if (this.cateKind != 1) {
									appCmsContent.loadtableCmsContentData();
								}
							} else {
								this.$message.error(response.body.msg);
								appCmsContent.isButtonLoadingCmsContent = false;
							}
						}).catch(function (error) {
							console.log(error);
						});							
					}
				});
			},
			resetForm() {
				this.modelCmsContent = {
					id: null,
					cateId: null,
					tags: '',
					contentDesc: '',
		            url: '',
		            pic: '',
		            pic2: '',
		            clicks: 0,
		            isTop: false,
		            isRcmd: false,
		            sort: 666,
		            status: 1,
		            siteId: null,
		            content: ''
				};
				this.$refs.formCmsContent.resetFields();
			},
			dialogTableCmsContentClosed() {
				
			},
			dialogCmsContentClosed() {
				this.resetForm();
			},
		},
		created() {
			this.loadCmsSite();
		}
	})
</script>